<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">系统管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>物资管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片-->
    <el-card class="box-card">

      <el-row :gutter="20">
        <!--左边的树形结构开始-->
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-tree
              :data="productCategoryMenuTree"
              show-checkbox
              node-key="id"
              :props="defaultProps">
            </el-tree>
          </div>
        </el-col>
        <!--左边的树形结构结束-->

        <!--右边的表格选择开始-->
        <el-col :span="18">
          <!-- 搜索表单开始-->
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label-width="70px">
              <el-input v-model="formInline.user" placeholder="请输入物资名"></el-input>
            </el-form-item>

            <el-form-item style="margin-left: 10px">
              <el-button icon="el-icon-refresh">重置</el-button>
              <el-button type="primary" icon="el-icon-search" @click="getCheckedNodes()">查询</el-button>
            </el-form-item>

            <el-form-item>
              <el-button @click="toggleSelection()">取消选择</el-button>
              <el-button type="success" style="margin-left: 280px">查看已选</el-button>
            </el-form-item>
          </el-form>
          <!--搜索表单结束-->

          <!--数据表格开始-->
          <div>
            <el-table
              ref="multipleTable"
              :data="productList"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">

              <el-table-column
                fixed
                type="selection"
                width="55">
              </el-table-column>

              <el-table-column
                prop="pnum"
                label="物资编号"
                width="180">
              </el-table-column>

              <el-table-column
                prop="name"
                label="物资名称"
                width="180">
              </el-table-column>

              <el-table-column
                prop="imageUrl"
                label="图片"
                width="180"
                show-overflow-tooltip>
              </el-table-column>

              <el-table-column
                prop="unit"
                label="计量单位"
                show-overflow-tooltip>
              </el-table-column>

              <el-table-column
                prop="model"
                label="规格"
                show-overflow-tooltip>
              </el-table-column>

              <el-table-column
                prop="oneCategoryName"
                label="一级分类"
                show-overflow-tooltip>
              </el-table-column>

              <el-table-column
                prop="twoCategoryName"
                label="二级分类"
                show-overflow-tooltip>
              </el-table-column>

              <el-table-column
                prop="threeCategoryName"
                label="三级分类"
                show-overflow-tooltip>
              </el-table-column>
            </el-table>
            <!--数据表格结束-->

            <!--分页开始-->
            <el-pagination
              style="padding-top: 15px"
              :current-page="current"
              :page-sizes="[6, 12, 24, 36]"
              :page-size="pages"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
            <!--分页结束-->
          </div>

        </el-col>
        <!--右边的表格选择结束-->
      </el-row>
    </el-card>
  </div>
</template>

<script>

  export default {
    name: 'Materials',
    data () {
      return {
        // 树形控件的数据
        productCategoryMenuTree: [],
        // 树形控件的规则
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        // 表格中显示的数据
        productList: [],
        // 总条数
        total: 10,
        // 当前页码
        current: 1,
        // 总页数
        pages: 1,
        multipleSelection: [],
        formInline: [{
          user: '',
        }]
      }
    },
    methods: {
      getCheckedNodes(){
        console.log(this.$refs.tree.getCheckedNodes());
      },
      toggleSelection (rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },
      handleSelectionChange (val) {
        this.multipleSelection = val
      }
    },
    created () {
      // 获取树形控件的数据
      this.$http.get('/productCategory/getProductCategoryMenuTree')
        .then(res => {
          this.productCategoryMenuTree = res.data.data.productCategoryMenuTree
        }).catch(error => {
        console.log(error)
      })
      // 获取表格的数据
      this.$http.post('product/getProductWithCategoryName')
        .then(res => {
          // 获取表格中显示的数据
          this.productList = res.data.data.productIPage.records
          // 获取总记录数
          this.total = res.data.data.productIPage.total
          // 获取当前页码
          this.current = res.data.data.productIPage.current
          // 获取总页数
          this.pages = res.data.data.productIPage.pages
        }).catch(error => {
        console.log(error)
      })
    }
  }
</script>

<style scoped>

</style>
